import React from 'react';

interface Props {
  name?: string;
  icon: (props: {
    className: string;
    'aria-hidden': boolean | 'true' | 'false';
  }) => React.ReactElement;
}

export function IconButton({ name, icon: Icon }: Props) {
  return (
    <>
      <button
        type="button"
        className="appearance-none bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 active:bg-gray-200 h-9 hover:transition-none transition-colors select-none"
      >
        <span className="sr-only">{name}</span>
        <Icon className="text-xl" aria-hidden />
      </button>
    </>
  );
}
